<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");

    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: sans-serif;
      background: #2f2e34;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: "Inter", sans-serif;
    }

    button {
      background: none;
      border: none;
    }

    #button-container button svg {
      transition: transform 1s ease;
    }

    #button-container,
    #button-container span,
    #button-container button {
      display: flex;
      white-space: nowrap;
      gap: 1px;
      align-items: center;
      cursor: pointer;
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      color: #c7c7c7;
    }

    #button-container {
      color: #c7c7c7;
      height: 40px;
      background: rgba(255, 255, 255, 0.03);
      width: 300px;
      border: 2px solid #a5a5a5;
      border-radius: 12px;
      padding: 0px 16px;
      overflow: hidden;
      transition: width 1s ease;
      cursor: pointer;
    }

    #button-container>svg,
    #button-container span {
      border-left: 2px solid rgba(255, 255, 255, 0.1);
      padding: 5px;
      height: 100%;
    }

    #button-container.minimized {
      width: 77px;
    }

    #button-container.minimized>svg,
    #button-container.minimized span {
      display: none;
    }

    #button-container.minimized button svg {
      transform: rotate(180deg);
    }

    #button-container:hover {
      transform: scale(1.1);
    }
  </style>
</head>

<body>
  <div id="button-container" class="minimized">
    <button type="button" onclick="toggleMinimize()">Contacts
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z"
          fill="#C7C7C7" />
    </button>

    <span></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M21 8C21 6.34315 19.6569 5 18 5H10C8.34315 5 7 6.34315 7 8V20C7 21.6569 8.34315 23 10 23H18C19.6569 23 21 21.6569 21 20V8ZM19 8C19 7.44772 18.5523 7 18 7H10C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44772 21 10 21H18C18.5523 21 19 20.5523 19 20V8Z"
          fill="#C7C7C7" />
        <path
          d="M6 3H16C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1H6C4.34315 1 3 2.34315 3 4V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V4C5 3.44772 5.44772 3 6 3Z"
          fill="#C7C7C7" />
      </svg>
      Copy Email</span>

    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M6.5 8C7.32843 8 8 7.32843 8 6.5C8 5.67157 7.32843 5 6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8Z"
        fill="#C7C7C7" />
      <path
        d="M5 10C5 9.44772 5.44772 9 6 9H7C7.55228 9 8 9.44771 8 10V18C8 18.5523 7.55228 19 7 19H6C5.44772 19 5 18.5523 5 18V10Z"
        fill="#C7C7C7" />
      <path
        d="M11 19H12C12.5523 19 13 18.5523 13 18V13.5C13 12 16 11 16 13V18.0004C16 18.5527 16.4477 19 17 19H18C18.5523 19 19 18.5523 19 18V12C19 10 17.5 9 15.5 9C13.5 9 13 10.5 13 10.5V10C13 9.44771 12.5523 9 12 9H11C10.4477 9 10 9.44772 10 10V18C10 18.5523 10.4477 19 11 19Z"
        fill="#C7C7C7" />
      <path fill-rule="evenodd" clip-rule="evenodd"
        d="M20 1C21.6569 1 23 2.34315 23 4V20C23 21.6569 21.6569 23 20 23H4C2.34315 23 1 21.6569 1 20V4C1 2.34315 2.34315 1 4 1H20ZM20 3C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20Z"
        fill="#C7C7C7" />
    </svg>
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd"
        d="M19.7828 3.91832C20.1313 3.83573 20.3743 3.75452 20.5734 3.66922C20.8524 3.54968 21.0838 3.40649 21.4492 3.16531C21.7563 2.96263 22.1499 2.94498 22.4739 3.11936C22.7979 3.29374 23 3.63197 23 3.99993C23 5.08087 22.8654 5.9668 22.5535 6.74648C22.2911 7.40228 21.9226 7.93495 21.4817 8.41975C21.2954 11.7829 20.3219 14.424 18.8336 16.4249C17.2911 18.4988 15.2386 19.8269 13.0751 20.5706C10.9179 21.3121 8.63864 21.4779 6.59672 21.2268C4.56818 20.9774 2.69306 20.3058 1.38607 19.2892C1.02814 19.0109 0.902328 18.5265 1.07953 18.1091C1.25672 17.6917 1.69258 17.4458 2.14146 17.5099C3.42742 17.6937 4.66532 17.4013 5.68321 16.9832C5.48283 16.8742 5.2939 16.7563 5.1183 16.6347C4.19076 15.9925 3.44242 15.1209 3.10558 14.4472C2.9662 14.1684 2.96476 13.8406 3.10169 13.5606C3.17233 13.4162 3.27563 13.293 3.40105 13.1992C2.04679 12.0815 1.50001 10.5356 1.50001 9.49994C1.50001 9.192 1.64188 8.90123 1.88461 8.71172C1.98666 8.63204 2.10176 8.574 2.2231 8.53904C2.12176 8.2423 2.04312 7.94249 1.98317 7.65224C1.71741 6.36537 1.741 4.91291 2.02986 3.75741C2.12871 3.36199 2.45766 3.06613 2.8613 3.0096C3.26495 2.95307 3.66251 3.14717 3.86619 3.50021C4.9437 5.3679 6.93117 6.50951 8.78088 7.18576C9.65051 7.50369 10.456 7.7063 11.0596 7.83086C11.1899 6.61027 11.5308 5.60367 12.0538 4.80418C12.7439 3.74939 13.7064 3.12532 14.7401 2.84705C16.5227 2.36715 18.5008 2.9139 19.7828 3.91832ZM10.7484 9.80852C10.0633 9.67095 9.12173 9.43984 8.09414 9.06416C6.73692 8.56796 5.1609 7.79425 3.84073 6.59578C3.86436 6.81633 3.89791 7.035 3.94184 7.24774C4.16309 8.31907 4.57421 8.91906 4.94722 9.10557C5.40343 9.33367 5.61486 9.86858 5.43789 10.347C5.19829 10.9946 4.56811 11.0478 3.99552 10.9046C4.45605 11.5951 5.28379 12.2835 6.66441 12.5136C7.14059 12.593 7.49209 13.0012 7.49988 13.4839C7.50766 13.9666 7.1695 14.3859 6.69612 14.4806L5.82566 14.6547C5.95882 14.7704 6.10301 14.8839 6.25672 14.9903C6.95363 15.4728 7.65338 15.6809 8.25747 15.5299C8.70992 15.4167 9.18048 15.6314 9.39164 16.0472C9.6028 16.4631 9.49847 16.9697 9.14019 17.2682C8.49627 17.8042 7.74426 18.2342 6.99059 18.5912C6.63677 18.7588 6.24136 18.9242 5.81191 19.0698C6.1422 19.1403 6.48587 19.1981 6.8408 19.2418C8.61137 19.4595 10.5821 19.3127 12.4249 18.6793C14.2614 18.048 15.959 16.9386 17.2289 15.2313C18.4971 13.5263 19.382 11.1668 19.5007 7.96298C19.51 7.71075 19.6144 7.47137 19.7929 7.29289C20.2426 6.84324 20.6141 6.32785 20.7969 5.71438C20.477 5.8141 20.1168 5.90042 19.6878 5.98245C19.3623 6.04467 19.0272 5.94164 18.7929 5.70734C18.0284 4.94282 16.5164 4.44006 15.26 4.7783C14.6686 4.93748 14.1311 5.28211 13.7275 5.89913C13.3153 6.52911 13 7.51052 13 8.99998C13 9.28295 12.8801 9.55268 12.6701 9.74228C12.1721 10.1918 11.334 9.9261 10.7484 9.80852Z"
        fill="#C7C7C7" />
    </svg>
  </div>

  <script>
    function toggleMinimize() {
      const buttonContainer = document.getElementById("button-container");
      buttonContainer.classList.toggle("minimized");
    }
  </script>
</body>

</html>